<script setup lang="ts">
import { orderState, orderStateActions, pageUrl } from '@/utils/constants'
import { putOrderCancelByIdApi } from '@/api/order'
import { nextTick, ref } from 'vue'
import { usePupupStore } from '@/stores'

const props = defineProps<{
  status: number
  id: number
  type?: string
  className?: string
}>()

// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
// 取消原因
const reason = ref('')
const customReason = ref('')

const reasonList = ref(['Out of stock', 'No longer wanted', 'Wrong product info', 'Wrong address', 'Price dropped'])

const onChangeReason = (item: any) => {
  customReason.value = ''
  reason.value = item
}

const usePouup = usePupupStore()

// 展示取消订单弹窗
const onOpenPopup = () => {
  usePouup.changeCancelPopupStatus(true)
  nextTick(() => {
    popup.value?.open?.()
  })
}

const onClosePopup = () => {
  usePouup.changeCancelPopupStatus(false)
  nextTick(() => {
    popup.value?.close?.()
  })
}

const emit = defineEmits(['cancel'])

//取消订单
const onCancelOrder = async () => {
  if (!reason.value) {
    uni.showToast({
      title: 'Select cancellation reason',
      icon: 'none',
    })
    return
  }

  const res = await putOrderCancelByIdApi({
    id: props.id,
    cancel_reason: reason.value,
  })
  if (res) {
    if (props.status == orderState.toPay) {
      uni.showToast({
        title: 'Cancellation success',
        icon: 'success',
        mask: true,
      })
    } else {
      uni.showToast({
        title: 'Cancel request submitted. Waiting for review',
        icon: 'none',
        mask: true,
      })
    }
  }

  popup.value?.close?.()
  usePouup.changeCancelPopupStatus(false)

  setTimeout(() => {
    // 触发cancel事件
    emit('cancel', { orderId: props.id, reason: reason.value })
  }, 1000)
}
</script>

<template>
  <view v-if="orderStateActions.cancelable.includes(props.status)">
    <view :class="props.className" @tap="onOpenPopup"> Cancel order </view>

    <!-- 取消订单弹窗 -->
    <view @touchmove.prevent.stop>
      <uni-popup ref="popup" type="bottom" background-color="#fff" :is-mask-click="false">
        <view class="popup-root">
          <view class="title">Cancel order</view>
          <view class="description">
            <view class="tips">Select cancel reason：</view>
            <view class="cell" v-for="item in reasonList" :key="item" @tap="onChangeReason(item)">
              <text class="text">{{ item }}</text>
              <text class="icon" :class="{ checked: item === reason }"></text>
            </view>
            <view class="cell">
              <text class="text">Other reasons :</text>
            </view>
            <view class="reasons">
              <input
                type="text"
                v-model="customReason"
                placeholder="Please enter other reasons"
                @tap="reason = ''"
                @change="reason = customReason"
              />
            </view>
          </view>
          <view class="footer">
            <view class="button" @tap="onClosePopup">Cancel</view>
            <view class="button primary" @tap="onCancelOrder">Confirm</view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<style lang="scss">
.popup-root {
  padding: 30rpx 30rpx 0;
  border-radius: 10rpx 10rpx 0 0;
  overflow: hidden;

  .title {
    font-size: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .description {
    font-size: 28rpx;
    padding: 0 20rpx;

    .tips {
      color: #444;
      margin-bottom: 12rpx;
    }

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 0;
      color: #666;

    }

    .icon::before {
      content: '\e6cd';
      font-family: 'iconfont' !important;
      font-size: 38rpx;
      color: #999;
    }

    .icon.checked::before {
      content: '\e6cc';
      font-size: 38rpx;
      color: #ff5f3c;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;
  }
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 200rpx;
  height: 60rpx;
  margin-left: 15rpx;
  font-size: 26rpx;
  border-radius: 72rpx;
  border: 1rpx solid #ccc;
  color: #444;
}

.primary {
  color: #fff;
  background-color: #ff5f3c;
  border: none;
}

.secondary {
  order: 2;
  color: #ff5f3c;
  border-color: #ff5f3c;
}

.reasons {
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 20rpx;
  margin-top: 20rpx;
}
</style>
